<template>
  <div class="app">
    <van-nav-bar
      title="进行中球局"
      left-text=""
      left-arrow
      @click="backlink()"
    ></van-nav-bar>
    <div
      class="table-card"
      v-if="orderinfo.table != null && orderinfo.table.length > 0"
    >
      <div
        v-for="(order, index) in orderinfo.table"
        :key="index"
        class="order_card"
      >
        <div class="titleline">
          <icon-svg
            icon-class="club_white"
            icon-color="#304056"
            class="club_white-icon"
          ></icon-svg>
          <div class="title">
            {{ order.store_name }}{{ order.level }}{{ order.t_number }}号球桌
          </div>
        </div>
        <div class="infoline">开台计时：{{ formatTime(order.pay_time) }}</div>
        <div class="infoline">
          <div>费用合计：￥</div>
          <div class="money">{{ order.pay_money }}</div>
        </div>
        <div class="btn-card">
          <van-button
            class="xudanbtn"
            :disabled="order.is_continuation == 1"
            type="primary"
            >续单</van-button
          >
          <van-button
            class="jiesuanbtn"
            type="primary"
            @click="checkout(order)"
          >
            结算
          </van-button>
        </div>
      </div>
    </div>
    <div class="zhujiao-card" v-if="orderinfo.zhujiao != null">
      <div>
        <div class="boxtitle">
          <div class="shuxian"></div>
          <div class="datetitle">教练</div>
        </div>
        <div class="zhujiaobox">
          <div class="avatarbox">
            <img class="avatar" v-lazy="orderinfo.zhujiao.photo" alt="" />
          </div>
          <div class="zhujiaoinfobox">
            <div class="nickname-price-box">
              <div style="font-size: 18px">
                {{ orderinfo.zhujiao.nickname }}
              </div>
              <div style="display: flex; align-items: flex-end">
                <div style="font-size: 20px; color: #5f94fd">
                  ￥{{ orderinfo.zhujiao.price }}
                </div>
                <div style="font-size: 14px; min-width: 50px">/小时</div>
              </div>
            </div>
            <div style="font-size: 16px">
              {{ orderinfo.zhujiao.zhujiao_id }}号{{ orderinfo.zhujiao.level }}
            </div>
          </div>
        </div>
        <div class="infoline1">
          教练计时：{{ orderinfo.zhujiao.currenttime }}
        </div>
        <div class="infoline1">
          <div>费用合计：￥</div>
          <div class="money">{{ orderinfo.zhujiao.currentprice }}</div>
        </div>
      </div>
    </div>
    <div class="more-card">
      <div class="boxtitle">
        <div class="shuxian"></div>
        <div class="datetitle">更多服务</div>
      </div>
      <div class="btn_box">
        <div style="text-align: center" @click="gotodiancan">
          <icon-svg
            icon-class="diancan"
            icon-color="#304056"
            class="more-icon"
          ></icon-svg>
          <div style="font-size: 14px; font-weight: 550">点餐</div>
        </div>
        <div style="text-align: center">
          <icon-svg
            icon-class="callwaiter"
            icon-color="#304056"
            class="more-icon"
          ></icon-svg>
          <div style="font-size: 14px; font-weight: 550">呼叫服务员</div>
        </div>
        <div style="text-align: center">
          <icon-svg
            icon-class="dianzhujiao"
            icon-color="#304056"
            class="more-icon"
          ></icon-svg>
          <div style="font-size: 14px; font-weight: 550">点助教</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useStore } from "@/store/index.js";
import { showToast } from "vant";
import { timbill, endreservation } from "@/http/request.js";
export default {
  data() {
    return {
      orderinfo: {},
      timer: null,
    };
  },
  methods: {
    checkout(data) {
      const store = useStore();
      const notpayorder = store.getNotPayOrder;
      endreservation({ o_id: data.id }).then((res) => {
        if (res.code == 0) {
          notpayorder.table.push(res.data);
          this.$router.push("/checkout");
        }
      });
    },
    backlink() {
      this.$router.push("/homepage");
    },
    gotodiancan() {
      this.$router.push({
        name: "DiancanPage",
        params: {
          orderinfo: JSON.stringify(this.orderinfo),
        },
      });
    },
    formatTime(seconds) {
      let hours = Math.floor(seconds / 3600);
      let minutes = Math.floor((seconds % 3600) / 60);
      let remainingSeconds = seconds % 60;

      // 添加前导零
      hours = String(hours).padStart(2, "0");
      minutes = String(minutes).padStart(2, "0");
      remainingSeconds = String(remainingSeconds).padStart(2, "0");
      return hours + ":" + minutes + ":" + remainingSeconds;
    },
    formatmoney(data) {
      return data.toFixed(2);
    },
    startTimer(order) {
      order.timer = setInterval(() => {
        order.pay_time++;
        order.pay_money = (order.danjia * order.pay_time).toFixed(2);
      }, 1000);
    },
    stopTimer() {
      clearInterval(this.timer);
    },
    gettimbill() {
      const store = useStore();
      const userinfo = store.getUserStoreinfo;
      for (let i = 0; i < this.orderinfo.table.length; i++) {
        timbill({
          user_id: userinfo.id,
          o_id: this.orderinfo.table[i].id,
        }).then((res) => {
          if (res.code == 0) {
            this.orderinfo.table[i].is_continuation = res.data.is_continuation;
            this.orderinfo.table[i].pay_money = res.data.now_price.toFixed(2);
            this.orderinfo.table[i].pay_time = Math.round(
              res.data.time_elapsed
            );
            this.startTimer(this.orderinfo.table[i]);
          }
        });
      }
    },
    getplayingorder() {
      this.orderinfo = {};
      const store = useStore();
      const playingorder = store.getPlayingOrder;
      if (playingorder != undefined && playingorder.table.length > 0) {
        this.orderinfo.table = playingorder.table;
        for (var i = 0; i < this.orderinfo.table.length; i++) {
          this.orderinfo.table[i].pay_money = 0;
          this.orderinfo.table[i].pay_time = 0;
          this.orderinfo.table[i].danjia =
            this.orderinfo.table[i].table_price / 3600;
          if (this.orderinfo.table[i].t_grade == 1) {
            this.orderinfo.table[i].level = "中巴";
          } else if (this.orderinfo.table[i].t_grade == 2) {
            this.orderinfo.table[i].level = "包间";
          } else if (this.orderinfo.table[i].t_grade == 3) {
            this.orderinfo.table[i].level = "斯诺克";
          }
        }
        this.gettimbill();
      } else {
        showToast("暂无进行中球局");
      }
    },
  },
  created() {
    this.getplayingorder();
  },
  destroyed() {
    this.stopTimer();
  },
};
</script>

<style scoped>
.app {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  background-color: #f2f3f5;
}
.table-card {
  width: 90%;
  background-color: #79a5fb;
  margin: 15px auto;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.order_card {
  width: 100%;
}
.titleline {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 15px;
}
.club_white-icon {
  width: 25px;
  height: 25px;
  margin-right: 5px;
}
.titleline .title {
  font-size: 20px;
}
.infoline {
  width: 100%;
  height: 35px;
  background-color: #d5e3fd;
  font-size: 17px;
  line-height: 25px;
  box-sizing: border-box;
  padding: 5px;
  padding-left: 20px;
  margin-bottom: 10px;
  border-radius: 5px;
  display: flex;
}
.infoline .money {
  font-size: 19px;
  color: #fe865e;
  font-weight: 550;
}
.zhujiao-card {
  width: 90%;
  background-color: white;
  margin: 15px auto;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.boxtitle {
  display: flex;
  align-items: center;
}
.shuxian {
  width: 4px;
  height: 18px;
  background-color: #5e94fe;
  border-radius: 3px;
}
.datetitle {
  font-size: 18px;
  line-height: 25px;
  margin-left: 5px;
  font-weight: 550;
}
.zhujiaobox {
  width: 100%;
  height: 60px;
  margin: 10px auto;
  display: flex;
}
.zhujiaobox .avatarbox {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
}
.zhujiaobox .avatarbox .avatar {
  width: 100%;
  height: auto;
}
.zhujiaoinfobox {
  width: 75%;
  margin-left: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.nickname-price-box {
  display: flex;
  justify-content: space-between;
}
.infoline1 {
  width: 100%;
  height: 35px;
  background-color: #ecf2fe;
  font-size: 17px;
  line-height: 25px;
  box-sizing: border-box;
  padding: 5px;
  padding-left: 20px;
  margin-bottom: 10px;
  border-radius: 5px;
  display: flex;
}
.infoline1 .money {
  font-size: 19px;
  color: #fe865e;
  font-weight: 550;
}
.more-card {
  width: 90%;
  background-color: white;
  margin: 15px auto;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.btn_box {
  width: 100%;
  height: 80px;
  margin: 10px auto;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #f2f3f5;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.more-icon {
  width: 35px;
  height: 35px;
}
.btn-card {
  width: 90%;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
}
.xudanbtn {
  width: 45%;
  height: 40px;
  border-radius: 25px;
}
.jiesuanbtn {
  width: 45%;
  height: 40px;
  border-radius: 25px;
}
</style>